<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/minicart.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/font-awesome.css" rel="stylesheet">
<!--pop-up-box-->
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<!--//pop-up-box-->
<!-- price range -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui1.css">
<!-- fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800"
      rel="stylesheet">
<script>
    paypalm.minicartk.render(); //use only unique class names other than paypal1.minicart1.Also Replace same class name in css and minicart.min.js

    paypalm.minicartk.cart.on('checkout', function (evt) {
        var items = this.items(),
            len = items.length,
            total = 0,
            i;

        // Count the number of each item in the cart
        for (i = 0; i < len; i++) {
            total += 1;
        }

        if (total < 2 || total > 4) {
            alert('请选择2-4个商品进行比较');

            evt.preventDefault();
        }
    });
</script>

<body>
    <div class="product-sec1" id="appIphone">
        <h3 class="heading-tittle">苹果</h3>
        <div class="col-md-4 product-men" v-for="(item,index) in 3">
            <div class="men-pro-item simpleCart_shelfItem">
                <div class="men-thumb-item">
                    <img src="images/m1.jpg" alt="">
                    <div class="men-cart-pro">
                        <div class="inner-men-cart-pro">
                            <a href="single.html" class="link-product-add-cart">快速浏览</a>
                        </div>
                    </div>
                    <span class="product-new-top">热</span>
                </div>
                <div class="item-info-product ">
                    <h4>
                        <a href="single.html">{{ title[index] }}</a>
                    </h4>
                    <div class="info-product-price">
                        <span class="item_price">{{ price[index] }}</span>
                    </div>
                    <div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out">
                        <form action="" method="post">
                            <fieldset>
                                <input type="hidden" name="cmd" value="_cart"/>
                                <input type="hidden" name="add" value="1"/>
                                <input type="hidden" name="business" value=" "/>
                                <input type="hidden" name="item_name" value="Almonds, 100g"/>
                                <input type="hidden" name="amount" value="149.00"/>
                                <input type="hidden" name="discount_amount" value="1.00"/>
                                <input type="hidden" name="currency_code" value="USD"/>
                                <input type="hidden" name="return" value=" "/>
                                <input type="hidden" name="cancel_return" value=" "/>
                                <input type="submit" name="submit" value="添加到购物车" class="button"/>

                            </fieldset>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script src="js/minicart.js"></script>
<script>
    paypalm.minicartk.render(); //use only unique class names other than paypal1.minicart1.Also Replace same class name in css and minicart.min.js

    paypalm.minicartk.cart.on('checkout', function (evt) {
        var items = this.items(),
            len = items.length,
            total = 0,
            i;

        // Count the number of each item in the cart
        for (i = 0; i < len; i++) {
            total += 1;
        }

        if (total < 2 || total > 4) {
            alert('请选择2-4个商品进行比较');

            evt.preventDefault();
        }
    });
</script>


<script>
    var app1 = new Vue({
        el: '#appIphone',
        data: {
            price:[],
            img:[],
            title:[],
        },
        methods: {
            getIphone: function () {
                var that = this;
                $.ajax({
                    url: '/showThreea',
                    type: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (data) {
                        for (var i = 0; i < data.length; i++) {
                            if((i+1)%3==0){
                               that.img.push(data[i]);
                            }
                            if((i+1)%3==1){
                               that.title.push(data[i]);
                            }
                            if((i+1)%3==2){
                               that.price.push(data[i]);
                            }
                            console.log(that.price,that.img,that.title,)
                        }
                    },
                    error: function () {

                    }
                });
            }
        }
    });
    app1.getIphone();

</script>


</body>
</html>